Home CSS Termos e definições do CSS
Termos e definições do CSS
CSS Luiz Augusto Vieira 10/01/2018
Devemos ser consistentes no uso dos termos no que diz respeito ao CSS. Muitas coisas são bastante fáceis para a maioria dos desenvolvedores experientes, mas algumas não são usadas com frequência, de modo que uma atualização pode ajudar a esclarecer algumas inconsistências. Então, vamos lá!
CONJUTOS DE REGRAS
Um conjunto de regras é uma única seção de CSS, incluindo o seletor, as chaves e as diferentes linhas com propriedades e valores.
O conjunto de regras começa com a abertura da chave ” { ” e termina com fechamento da chave ” } “.
O código no exemplo abaixo compreende um conjunto de regras:
/* Começo do código abaixo */
body {
font-family: Arial, sans-serif;
font-size: 14px;
color: #555;
}
/* Fim do código acima */
BLOCO DE DECLARAÇÃO
Um bloco de declaração é a seção de CSS onde os pares de propriedade aparecem.
No exemplo abaixo, tudo que se encontra entre as chaves (não incluindo os comentários) é um bloco de declaração:
body {
font-family: Arial, sans-serif; /* começa com esta linha */
font-size: 14px;
color: #555;
line-height: 20px; /* termina aqui, antes do fechamento da chave " } " */
}
DECLARAÇÃO
Uma declaração é geralmente uma única linha de CSS que aparece entre as chaves.
No exemplo abaixo, temos dois tipos de declaração:
/*Abaixo temos um código com uma declaração entre as chaves*/
body {
font-family: Arial, sans-serif; /* esta linha é uma declaração */
}
/*Abaixo temos um código com duas declarações entre as chaves*/
body {
font-family: Arial, sans-serif; /* uma declação */
color: #555; /* outra declação */
}
PROPRIEDADE E VALOR
Uma propriedade é o que aparece antes dos dois pontos em qualquer linha de CSS.
O Valor é o que aparece depois dos dois pontos em qualquer linha de CSS.
No exemplo abaixo, a palavra “WIDTH” é a propriedade e o 400px é o valor, seguido de ponto e vírgula.
#div {
/* a propriedade é " WIDTH " e o valor é " 400px " */
width: 400px;
}
Nota: Se você usar uma abreviatura, em uma única declaração, pode ter múltiplos valores.
SELETOR
Um seletor é a parte da linha CSS que seleciona o elemento que deve ser alvo com o par de propriedades/valores.
No exemplo abaixo, “#CONTAINER #BOX” é o seletor:
/* o seletor é tudo na primeira linha */
#container #box {
width : 400px ;
}
SELETOR DE TIPO DE ELEMENTO
Um seletor de tipo de elemento é um seletor que segmenta um elemento pelo nome da etiqueta.
O seletor no exemplo abaixo é um seletor de tipo de elemento, porque não usa uma classe, ID ou outro seletor para aplicar os estilos fornecidos.
Em vez disso, ele direciona diretamente todos os ” SECTION ” elemento do HTML5:
/* corresponde a um elemento HTML pelo nome */
section {
font-family: Arial, sans-serif;
font-size: 16px;
color: #555;
}
SELETOR DE CLASSE
O seletor no exemplo abaixo almeja um elemento pelo nome da classe.
Então, cada elemento com uma classe denominada como ” MENU “, receberá os estilos em questão:
/* corresponde ao elemento HTML com a class="menu" */
.menu {
width: 960px;
margin: 0 auto;
}
SELETOR ID
O seletor no exemplo abaixo visa um elemento por sua ID.
Então, cada elemento com uma ID de ” MENU ” receberá os estilos em questão:
/* corresponde ao elemento HTML com o id="menu" */
#menu {
width: 960px;
margin: 0 auto;
}
SELETOR UNIVERSAL
O seletor universal corresponde a qualquer elemento no contexto no qual ele é colocado em um seletor.
No exemplo abaixo, o caractere ” * ” é o seletor universal:
/* o caractere de asterisco ( * ) é o seletor universal */
.menu ul * {
width: 100px;
float: left;
}
Assim, qualquer elemento que aparece como uma criança descendente do elemento da lista não ordenada dentro de um elemento que tenha uma classe de ” menu ” receberá os estilos declarados.
Os seletores universais geralmente são desencorajados por motivos de desempenho.
SELETOR DE ATRIBUTOS
Um seletor de atributos seleciona um elemento para o estilo com base em um atributo e/ou valor de atributo.
O exemplo abaixo visa determinados elementos de parágrafo com base na existência de um atributo ” STYLE “:
/* <span class="minha-classe"> combina elementos com style="[teste]" </span>*/
p[style] {
color: #1e1e1e;
}
O exemplo abaixo visa determinados elementos de entrada com base na existência de um atributo de tipo com um valor de ” text “:
/* corresponde a elementos de entrada com type="text" */
input[type="text"] {
border: solid 1px #ccc;
}
PSEUDO-CLASSE
Uma pseudo-classe funciona de forma semelhante a uma classe CSS regular, exceto que não está explicitamente declarada no HTML.
No exemplo abaixo, a pseudo-classe é adicionada ao elemento âncora:
/* a palavra "hover" juntamente com o cólon anterior é a pseudo-classe */
a:hover {
text-decoration: none;
}
Uma pseudo-classe sempre tem um único cólon seguido de uma palavra-chave de algum tipo, sem espaço antes ou depois do cólon.
Outros pseudo-classes incluem :visited, :focus e :first-child.
PSEUDO-ELEMENTO
Um pseudo-elemento não é o mesmo que uma pseudo-classe. Enquanto uma pseudo-classe combina elementos que realmente existem, pseudo-elementos segmentam elementos “virtuais” que podem mudar dependendo do HTML real. Os pseudo-elementos CSS2 usam um único cólon e os pseudo-elementos CSS3 usam um duplo cólon.
No exemplo abaixo, o primeiro conjunto de regras usa um pseudo-elemento CSS2 e o segundo conjunto de regras usa um pseudo-elemento CSS3:
/* "first-letter" incluindo o cólon anterior é o pseudo-elemento */
p:first-letter {
display: block;
float: left;
margin: 0 5px 5px 0;
}
/ * CSS3 pseudo-elementos têm dois pontos * /
::selection {
background: green;
}
COMBINADOR
Um combinador é o caractere em um seletor que conecta dois seletores juntos. Existem quatro tipos de combinadores. Esses quatro combinadores ajudam a criar seletores descendentes (com um caractere espacial), seletores filho (com o caractere “>”), seletores de irmãos adjacentes (com o caractere “+”) e seletores gerais de irmãos (com o caractere “~”).
Para dissipar qualquer confusão, aqui estão os quatro combinadores em uso:
/* Em todos os 4 exemplos */
/*, o que aparecer entre " div " e " p " é um combinador */
/* no primeiro exemplo, o combinador é um caractere espacial */
div p {
color: #222;
}
div>p {
color: #333;
}
div+p {
color: #444;
}
div~p {
color: #555;
}
At-Rule
Uma regra é uma instrução dada em um documento CSS usando o caractere @. Uma regra pode ter um bloco de declaração ou uma simples sequência de texto.
O exemplo abaixo tem duas regras diferentes:
@import url(style-2.css);
@media print {
#container {
width: 500px;
}
}
A regra não é apenas a parte “@media” ou “@import” no início; Toda a instrução compreende a regra completa.
IDENTIFICADOR
Um identificador pode ser qualquer coisa que aparece como uma propriedade, id, classe, valor da palavra-chave e na regra.
No exemplo, abaixo, existem quatro identificadores:
/ * "body", "background", "none" e "font-size" são identificadores * /
body {
background: none;
font-size: 14px;
}
/* "14px" não é um identificador */
A palavra “BODY” é um identificador; a palavra “BACKGROUND” é um identificador; a palavra “NONE” é um identificador; e a palavra ” FONT-SIZE” é um identificador.
O último valor ” 14px ” não é um identificador, porque não é uma palavra-chave.
PALAVRA-CHAVE
Uma palavra-chave é um valor para uma propriedade e é como uma palavra reservada para uma propriedade específica. Propriedades diferentes têm palavras-chave diferentes e todas as propriedades permitem a palavra-chave ” inherit “.
No exemplo abaixo, o valor “auto” é uma palavra-chave.
#container {
height: auto; /* "auto" é uma palavra-chave */
}
ATÉ O PRÓXIMO POST
Sentiu falta de alguma coisa óbvia? Comente, dei sua opinião, ajude a divulgar o Blog.
Inscreva-se no Youtube: https://www.youtube.com/htmlecsspro
Curta nossa Fanpage: https://www.facebook.com/htmlecsspro
Entre para o nosso Grupo: https://www.facebook.com/groups/htmlecsspro
Olá, deixe seu comentário para Termos e definições do CSS